import React, { createRef, useEffect, useState } from 'react';
import './work.less';
import { history, NavLink } from 'umi';
import request from 'umi-request';
import axios from 'axios';
import { setInterval } from 'timers';
type Props = {};
import { Button, message, Upload } from 'antd';

const props = {
  name: 'file',
  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  headers: {
    authorization: 'authorization-text',
  },
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} 上传成功`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};
export default function work({}: Props) {
  let [notification, set_notification] = useState([]);
  let [journalism, set_journalism] = useState([]);

  useEffect(() => {
    renderList();
    request('/api/ljf/apply', { method: 'get' }).then((res) => {
      setApply(res.apply.slice(0, 10));
      setDealts(res.dealt.slice(0, 10));
      setDone(res.done.slice(0, 10));
    });
  }, []);
  const renderList = () => {
    request('/api/hyq/get_notification', { method: 'get' }).then((val) => {
      set_notification(val.data.slice(0, 13));
    });
    request('/api/hyq/get_journalism', { method: 'get' }).then((val) => {
      set_journalism(val.data.slice(0, 3));
      // console.log(val.data.data.slice(0, 3), 'list')
    });
  };
  // 触发图片新闻变色
  let [newsref, set_newsref] = useState(4);
  // 触发通知公告变色
  let [noti, setnoti] = useState(0);
  // 点击变色
  let [acitve_noti, set_acitve_noti] = useState(0);

  // 实时时间
  let [datee, set_datee] = useState('');
  let [timee, settime] = useState('');
  // 时间获取
  let showTime = () => {
    var date = new Date();
    // 年月日
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();

    // 时分秒
    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();

    // 周几
    var str = '';
    var week = new Date().getDay();
    if (week == 0) {
      str = '星期日';
    } else if (week == 1) {
      str = '星期一';
    } else if (week == 2) {
      str = '星期二';
    } else if (week == 3) {
      str = '星期三';
    } else if (week == 4) {
      str = '星期四';
    } else if (week == 5) {
      str = '星期五';
    } else if (week == 6) {
      str = '星期六';
    }
    if (second <= 9) {
      second = '0' + second;
    }
    // 实时显示
    let ccc = year + '-' + month + '-' + day + ' ' + str;
    let aaa = hour + ':' + minute + ':' + second;
    set_datee(ccc);
    settime(aaa);
  };
  useEffect(() => {
    timerStart();
  }, []);

  let timerStart = () => {
    var timer = setInterval(() => showTime(), 1000);
  };
  // 我的申请
  const [apply, setApply] = useState([]);
  const [aid, setAid] = useState('');
  // 我的待办
  const [dealts, setDealts] = useState([]);
  // 我的已办
  const [done, setDone] = useState([]);
  return (
    <div className="work">
      <div className="work1">
        <div
          className="box"
          onClick={() => {
            // history.push('/work1');
          }}
        >
          <div className="box_title">
            <div className="title_name">通知公告</div>
            <div className="title_src">
              <img
                src={require('./static/more.gif')}
                alt="more"
                onClick={() => {
                  history.push('/notice/notice_manager');
                }}
              />{' '}
            </div>
          </div>
          <div className="box_content">
            <ul>
              {notification.map((item, index) => {
                return (
                  <li key={index}>
                    <div>
                      <span></span>
                      <NavLink
                        className={acitve_noti === index + 1 ? 'a_active' : 'a'}
                        to={{ pathname: '/work1', state: item }}
                        onClick={() => {}}
                        onMouseEnter={() => {
                          setnoti(index + 1);
                          // console.log(index + 1);
                        }}
                        onMouseLeave={() => {
                          setnoti(0);
                        }}
                        style={noti === index + 1 ? { color: '#0783e4' } : {}}
                      >
                        {item.title}
                      </NavLink>
                    </div>
                    <div className="box_content_publish">{item.publish}</div>
                  </li>
                );
              })}
            </ul>
          </div>
        </div>
        <div
          className="box"
          onClick={() => {
            // history.push('/work2');
          }}
        >
          <div className="box_title">
            <div className="title_name">图片新闻</div>
            <div className="title_src">
              <img
                src={require('./static/more.gif')}
                alt="more"
                onClick={() => {
                  history.push('/notice/notice_main');
                }}
              />
            </div>
          </div>
          <div className="box_news">
            {journalism.map((item, index) => {
              return (
                <div
                  className="box_news_one"
                  key={index}
                  onMouseEnter={() => {
                    set_newsref(index);
                  }}
                  onClick={() => {
                    history.push('/work2', item);
                  }}
                  onMouseLeave={() => {
                    set_newsref(4);
                  }}
                  style={
                    newsref === index ? { backgroundColor: '#eaf2ff' } : {}
                  }
                >
                  <div className="box_news_left">
                    <img src={item.title_pic} alt="" />
                  </div>
                  <div className="box_news_right">
                    <div className="box_news_right_top">
                      <div
                        className="box_news_right_title"
                        style={newsref === index ? { color: '#0783e4' } : {}}
                      >
                        {item.title}
                      </div>
                      <div className="box_news_right_publish">
                        {item.publish}
                      </div>
                    </div>
                    <div className="box_news_right_bottom">
                      {item.content.map((items, index) => {
                        if (index <= 3) {
                          return <p key={index}>{items}</p>;
                        }
                      })}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <div
          className="box"
          onClick={() => {
            // history.push('/work3');
          }}
        >
          <div className="box_title">
            <div className="title_name">考勤打卡</div>
            <div className="title_src">
              <img src={require('./static/more.gif')} alt="more" />
            </div>
          </div>
          <div className="box_timecard">
            <div className="box_timecard_top">
              <div className="box_timecard_top_time">
                <div className="datee">{datee}</div>
                <div className="timee">{timee}</div>
              </div>
              <div className="box_timecard_top_active">
                <Upload {...props}>
                  {/* <Button icon={<UploadOutlined />}>Click to Upload</Button> */}
                  <div className="onpayload">上传照片...</div>
                </Upload>
                <Button type="text" className="button_active">
                  更新签退
                </Button>
              </div>
            </div>
            <div className="box_timecard_bottom">
              <div className="box_timecard_bottom_all">
                <div className="box_timecard_bottom_one">
                  上班打卡时间: 08:45
                  <span
                    style={{
                      backgroundColor: '#1e90ff',
                      fontSize: '12px',
                      color: 'white',
                    }}
                  >
                    电脑
                  </span>
                  <span
                    style={{
                      backgroundColor: '#808080',
                      fontSize: '12px',
                      color: 'white',
                    }}
                  >
                    无图
                  </span>
                  <span
                    style={{
                      backgroundColor: '#ff0000',
                      fontSize: '12px',
                      color: 'white',
                    }}
                  >
                    正常
                  </span>
                </div>
                <div className="box_timecard_bottom_one">
                  <div className="box_timecard_bottom_one_top">
                    上班打卡时间: 08:45
                    <span
                      style={{
                        backgroundColor: '#1e90ff',
                        fontSize: '12px',
                        color: 'white',
                      }}
                    >
                      电脑
                    </span>
                    <span
                      style={{
                        backgroundColor: '#808080',
                        fontSize: '12px',
                        color: 'white',
                      }}
                    >
                      无图
                    </span>
                  </div>
                  <div className="box_timecard_bottom_one_bottom">
                    打卡地点： 127.0.0.1
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="work2">
        <div>
          <div className="work_top">
            <span>我的申请</span>
            <img
              src="https://erpdemo.fanpusoft.com/res/themes/Custom_ERP/more_bg.gif"
              alt=""
              onClick={() => {
                history.push('/work4');
              }}
            />
          </div>
          <dl>
            {apply.map((item: any, index: any) => {
              return (
                <dd
                  key={index}
                  onClick={() => {
                    setAid(item._id);
                  }}
                >
                  <img
                    src="https://erpdemo.fanpusoft.com/res/themes/Custom_ERP/red_list.gif"
                    alt=""
                  />
                  <span className={item._id === aid ? 'aid' : ''}>
                    {item.technological}
                  </span>
                  <span>{item.date?.split(' ')[0]}</span>
                </dd>
              );
            })}
          </dl>
        </div>
        <div>
          <div className="work_top">
            <span>我的待办</span>
            <img
              src="https://erpdemo.fanpusoft.com/res/themes/Custom_ERP/more_bg.gif"
              onClick={() => {
                history.push('/work5');
              }}
            />
          </div>
          <dl>
            {dealts.map((item: any, index: any) => {
              return (
                <dd
                  key={index}
                  onClick={() => {
                    setAid(item._id);
                  }}
                >
                  <img
                    src="https://erpdemo.fanpusoft.com/res/themes/Custom_ERP/red_list.gif"
                    alt=""
                  />
                  <span>{item.technological}</span>
                  <span>{item.date?.split(' ')[0]}</span>
                </dd>
              );
            })}
          </dl>
        </div>
        <div>
          <div className="work_top">
            <span>我的已办</span>
            <img
              src="https://erpdemo.fanpusoft.com/res/themes/Custom_ERP/more_bg.gif"
              onClick={() => {
                history.push('/work6');
              }}
            />
          </div>
          <dl>
            {done.map((item: any, index: any) => {
              return (
                <dd
                  key={index}
                  onClick={() => {
                    setAid(item._id);
                  }}
                >
                  <img
                    src="https://erpdemo.fanpusoft.com/res/themes/Custom_ERP/red_list.gif"
                    alt=""
                  />
                  <span>{item.technological}</span>
                  <span>{item.date?.split(' ')[0]}</span>
                </dd>
              );
            })}
          </dl>
        </div>
      </div>
    </div>
  );
}
